<template>
	<view class="address">
		<view class="address-card">
			<uni-card :is-shadow="false" :border="false" :margin="'20rpx'" :spacing="'20rpx'" :padding="0" >
				<view class="input" >
				<uni-forms ref="valiForm" :recruits="rules" :modelValue="valiFormData">
					<uni-forms-item label="抬头类型" required name="rise">
						<uni-data-checkbox mode="tag" selectedColor="#8dc9f1" selectedTextColor="#8dc9f1" v-model="valiFormData.rise" :localdata="radioData1" @change="onChange1"></uni-data-checkbox>
					</uni-forms-item>
					<uni-forms-item label="发票类型" required name="invoice_type">
						<uni-data-checkbox mode="tag" selectedColor="#8dc9f1" selectedTextColor="#8dc9f1" v-model="valiFormData.invoice_type" :localdata="valiFormData.rise == 1?radioData2:radioData" @change="onChange"></uni-data-checkbox>
					</uni-forms-item>
					<uni-forms-item label="发票抬头" required name="name">
						<uni-easyinput :clearable="false" :inputBorder="false" v-model="valiFormData.name" placeholder="请输入发票抬头" trim="both" />
					</uni-forms-item>
					<template v-if="valiFormData.rise != 1">
					<uni-forms-item label="公司税号" required name="duty">
						<uni-easyinput :clearable="false" :inputBorder="false" v-model="valiFormData.duty" placeholder="请输入公司税号" trim="both" />
					</uni-forms-item>
					<uni-forms-item label="开户银行"  name="bank">
						<uni-easyinput :clearable="false" :inputBorder="false" v-model="valiFormData.bank" placeholder="请输入开户银行" trim="both" />
					</uni-forms-item>
					<uni-forms-item label="银行卡号"  name="number">
						<uni-easyinput :clearable="false" type="number" :inputBorder="false" v-model="valiFormData.number" placeholder="请输入银行卡号" trim="both" />
					</uni-forms-item>
					<uni-forms-item label="企业地址"  name="address">
						<uni-easyinput :clearable="false" :inputBorder="false" v-model="valiFormData.address" placeholder="请输入企业地址" trim="both" style="flex:1;order:1;"/>
						<uni-icons type="location-filled" :color="seat == '' || valiFormData.address == ''?'#999999':'#D8EEFC'" :size="'36r'" style="order: 0;padding-left: 10rpx;" @click="getAddress"/>
					</uni-forms-item>
					<uni-forms-item label="企业电话"  name="telephone">
						<uni-easyinput :clearable="false" type="number" :inputBorder="false" v-model="valiFormData.telephone" placeholder="请输入企业电话" trim="both" />
					</uni-forms-item>
					</template>
				</uni-forms>
				</view>
			</uni-card>
		</view>
		<view class="address-but">
			<button v-if="id != ''" class="but but1" plain @click="delClick(id)">删除</button>
			<button class="but" plain @click="addClick('valiForm')">保存</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				id:'',
				seat:'', // 选择的位置
				radioData:[ // 选择发票类型
					{
							text: '普通发票',
							value: 1
						},
						{
							text: '增值税专用发票',
							value: 2
						}
				],
				radioData2:[ // 选择发票类型
					{
							text: '普通发票',
							value: 1
						}
				],
				radioData1:[ // 选择抬头类型
					{
							text: '个人',
							value: 1
						},
						{
							text: '企业',
							value: 2
						}
				],
				// 校验表单数据
				valiFormData: {
					invoice_type: '', // 发票类型1普通发票2增值税专用发票
					rise:'', // 抬头类型1个人2企业  
					name:'', // 发票抬头名称   
					duty: '', // 税号
					bank:'', // 开户银行  
					number:'', // 银行账号 
					address:'', // 企业地址
					telephone:'', // 企业电话 
				},
				// 校验规则
				rules: {
					invoice_type: {
						recruits: [{
							required: true,
							errorMessage: '发票类型不能为空'
						}]
					},
					rise: {
						recruits: [{
							required: true,
							errorMessage: '抬头类型不能为空'
						}]
					},
					name: {
						recruits: [{
							required: true,
							errorMessage: '发票抬头不能为空'
						},
						{
							format:'string',
							errorMessage: '发票抬头格式不正确'
						}]
					},
					duty: {
						recruits: [{
							required: true,
							errorMessage: '税号不能为空'
						}]
					},
				},
			};
		},
		onReady() {
			let _this = this;
			uni.setNavigationBarTitle({
			    title: _this.id?'修改发票抬头':'新增发票抬头'
			});
		},
		onLoad(option) {
			let _this = this
			if(option.id) {
				this.id = option.id
				this.$http.get('/index/Hotelpersonal/invoice_info',{invoice_id:option.id}).
				then(function (res) {
					//这里只会在接口是成功状态返回
					_this.valiFormData = {..._this.valiFormData,...res}
				}).catch(function (e) {
					//这里只会在接口是失败状态返回，不需要去处理错误提示
					uni.showToast({
						title: e.errMsg,
						icon:"none"
					})
				});
			} 
		},
		methods:{
			/**
			 * 删除操作
			 */
			async delClick(id) {
				try {
					let data = await this.$http.post('/index/Hotelpersonal/del_invoice',{id:id})
					// 返回到列表页
					uni.navigateBack({
					    delta: 1
					});
				} catch (err) {
					uni.showToast({
						title: err.errMsg,
						icon:"none"
					})
				}
			},
			async addClick(ref) {
				let _this = this
				try {
					let res = await this.$refs[ref].validate()
					if(res.id) {
						// let data = await this.$http.post('/index/Hotelpersonal/edit_hotel_address',res)
					} else{
						let data = await this.$http.post('/index/Hotelpersonal/add_invoice',res)
					}
					// 返回到列表页
					uni.navigateBack({
					    delta: 1
					});
				}catch (err) {
					if(err.length > 0) {
						uni.showToast({
							title: err[0].errorMessage,
							icon:"none"
						})
					} else if(err.errMsg){
						uni.showToast({
							title: err.errMsg,
							icon:"none"
						})
					}
				}
			},
			/**
			 * 获取位置
			 */
			async getAddress() {
				let _this = this
				await uni.authorize({
				    scope: 'scope.userLocation',
				    success() {
				        uni.chooseLocation({
				            success: function (res) {
								_this.valiFormData.address = res.address // 获取详细地址
								_this.seat = res.address // 获取详细地址
				            },
				        	fail(e) {
				        		console.log('获取位置失败',e)
				        	}
				        });
				    },
					fail(e){
						// uni.showToast({
						// 	title:"获取位置失败！",
						// 	icon:"none"
						// })
					}
				})
			},
			/**
			 *  发票类型选择时触发
			 * @param {Object} e 发票类型变化后的数据
			 */
			onChange(e) {
				this.valiFormData.type = e.detail.value
				if(e.detail.data.text == '增值税专用发票') {
					uni.showToast({
						title:"开具增值税专用发票请联系客服",
						icon:"none",
						duration:3000,
					})
				}
			},
			/**
			 *  抬头类型选择时触发
			 * @param {Object} e 抬头类型变化后的数据
			 */
			onChange1(e) {
				this.valiFormData.type = e.detail.value
			}
		}
	}
</script>

<style lang="scss">
.address {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100vh;
	.input-placeholder {
		font-size: 24rpx;
		color: rgba($color: #000000, $alpha: 0.5);
	}
	.address-card {
		flex: 1;
		overflow: auto;
		margin-bottom: 20rpx;
		.uni-card {
			border-radius: 20rpx;
			overflow: visible;
			.uni-card__header {
				padding: 6rpx 0;
			}
			.input {
				padding: 20rpx 20rpx;
				.uni-data-checklist {
					margin-top: 0!important;
					margin-left:40rpx;
					.checklist-group {
						justify-content: space-between;
					
						.checklist-box {
							box-sizing: border-box;
							border: 0;
							border-radius: 27rpx;
							height: 54rpx;
							background: #F2F2F2!important;
							padding: 0 20rpx;
							margin: 0 0 0 20rpx;
						}
					
						.is-checked {
							border: 1px solid #8dc9f1;
							background: #E8F9F1!important;
						}
					
						.checklist-content {
							justify-content: center;
					
							.checklist-text {
								font-size: 24rpx;
								font-weight: 500;
							}
						}
					}
				}
				.uni-forms-item__inner {
					// padding: 0;
					.uni-forms-item__content {
						display: flex;
						flex-direction: row-reverse;
						align-items: center;
					}
				}
				.uni-easyinput__content-input, .uni-combox__input {
					text-align: right;
				}
			}
		}
	}
	.address-but {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 80rpx;
		margin-bottom: 40rpx;
		.but {
			flex: 1;
			color: #FFFFFF;
			background: linear-gradient(-90deg, #8dc9f1, #d8eefc);
			border-radius: 40rpx;
			line-height: 80rpx;
			border: 0;
			margin: 0 20rpx;
		}
		.but1 {
			color: #000000;
			background: linear-gradient(-90deg, #ffffff, #ffffff);
		}
	}
}
</style>
